<template>
  <div class="login-form">
      <div class="g-form">
       <div class="g-form-line">
         <span class="g-form-label">用户名:</span>
         <div class="g-form-input">
           <input type="text" v-model="usernameModel" placeholder="请输入用户名" />
         </div>
         <span class="g-form-error">{{userErrors.errorText}}</span>
       </div>
       <div class="g-form-line">
         <div class="g-form-btn">
            <a class="button" @click="onRegin">注册</a>
         </div>
       </div>
       <p>{{errorText}}</p>
      </div>
  </div>
</template>
<script>
export default {
  data(){
      return {
        usernameModel:'',
        errorText:''
      }
  },
  computed:{
    userErrors(){
      let errorText,status;
      if(!/@/g.test(this.usernameModel)){
        errorText = '请输入含有@字符';
        status = false;
      }else{
         errorText = '';
         status = true;
      }

      //绑定第一次的输入
      if(!this.userFlag){
          errorText = '';
          this.userFlag = true;
      }

      return {
        errorText ,
        status
      }
    }
  },
  methods:{
    onRegin(){
      if(!this.userErrors.status){ //利用计算属性的特征
        this.errorText = '请输入完成的内容'
      }else{
         console.log('regin');
      }
    }
  }
}
</script>
<style>

</style>
